<template>
  <div>
    <div class="wolf-search">
      <input class="search-input"
             v-model="keyword"
             placeholder="请输入关键词..."
             @keydown.enter="localSearchKeyword"/>
    </div>
  </div>
</template>

<script>
import {mapState} from "vuex";

export default {
  name: "Retrieve",
  data() {
    return {
      keyword: "",
      local: null
    }
  },
  methods: {
    init() {
      this.local = new BMapGL.LocalSearch(this.map, {
        renderOptions: {map: this.map}
      });
    },
    localSearchKeyword() {
      if (this.keyword === "") {
        return
      }
      this.map.clearOverlays();
      this.local.search(this.keyword);
    },
  },
  computed: {
    ...mapState(["map"])
  },
  mounted() {
    this.init()
  },
  destroyed() {
    this.map.clearOverlays();
  }
}
</script>

<style scoped lang="less">
.wolf-search {
  width: 97%;
  height: auto;
  left: 50%;
  top: 15px;
  transform: translateX(-50%);
  position: fixed;
  z-index: 999;
  box-sizing: border-box;
  padding: 0 10px 0 10px;
  background-color: #fff;
  border-radius: 10px;
  font-size: 12px;
  color: rgba(0, 0, 0, .7);
  display: flex;
  align-items: center;

  .search-input {
    flex-grow: 1;
    height: 45px;
    font-size: 14px;

    &::placeholder {
      font-size: 12px;
    }
  }

}

.wolf-local-search {
  bottom: 100px;
  right: 10px;
  position: absolute;
  font-size: 25px;
  padding: 5px;
  color: rgba(0, 0, 0, .8);
  background-color: white;
  border-radius: 10px;
  z-index: 999;
  box-shadow: rgba(0, 0, 0, .2) 0 0 5px;
}

.active {
  color: rgba(66, 184, 131);
}
</style>